<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发帖</title>
    <link rel="stylesheet" href="/Demo/css/bootstrap.min.css">
    <style>
        #button {
            height: 50px;
            width: 100px;
            margin: 10px 700px;
            position: relative;
        }

        #d {
            /* 发布大div */
            position: absolute;
            margin-left: 700px;
            width: 700px;
        }

        .i1 {
            /* 图片 */
            width: 70px;
            height: 70px;
            margin-left: 0px;
            border-radius: 50%;
        }

        .d2 {
            /* 发布框内容 */
            position: absolute;
            margin-left: 10px;
            background-color: white;
            border: 1px solid gray;
            height: 400px;
            width: 600px;
        }

        #d2,.d2 {
            display: inline-block;
        }

        #s1 {
            width: 200px;
            height: 30px;
        }

        #d1 {
            position: absolute;
            margin-left: 700px;
            width: 700px;
            height: 500px;
        }
        #d3{
            float: left;
            width: 70px;
            height: 70px;
            margin: 10px;
        }
        .d3{
            margin-left: 20px;
            width: 550px;
            height: 100px;
        }
        #d3,.d3{
            display: inline-block;
        }
        #u1{
            margin: 0px;
            padding: 0px;
            list-style: none;

        }
        .li{
            margin: 10px;
            border-bottom:1px dashed;
        }
        p{
            width: 500px;
        }
    </style>
</head>

<body>
    <button id="button" class="btn btn-success" onclick="show()">我要发帖</button>
    <div id="d1" style="visibility:hidden;">
        <hr>
        <ul id="u1"></ul>
    </div>
    <div id="d" style="visibility:hidden">
        <hr>
        <div id="d2"></div>
        <div class="d2">
            <input id="input" type="text" placeholder="请输入标题(1-50个字符)" style="width: 500px; margin: 10px;"><br>
            <span style="margin-left: 10px;">所属板块:</span>
            <select id="s1">
                <option>电子书籍</option>
                <option>新闻杂志</option>
                <option>学习板块</option>
            </select>
            <br>
            <textarea id="textarea"cols="30" rows="10" style="margin:10px;height: 250px;width: 500px; "></textarea><br>
            <button class="btn btn-success" style="height: 30px;margin-left: 10px;width: 100px;"
                onclick="issue()">发布</button>
        </div>
        <hr style="border:1px gray dotted; margin-top: 20px;" />
    </div>
    <script>
        function show() {
            let div = document.getElementById("d2");
            let img = document.createElement("img");
            switch (parseInt(Math.random() * 4)) {
                case 0:
                    str = div.innerHTML = '<img class="i1" src="img/1.jpg" alt="">';
                    break;
                case 1:
                    str = div.innerHTML = '<img class="i1" src="img/2.jpg" alt="">';
                    break;
                case 2:
                    str = div.innerHTML = '<img class="i1" src="img/3.jpg" alt="">';
                    break;
                case 3:
                    str = div.innerHTML = '<img class="i1" src="img/4.jpg" alt="">';
                    break;
            }
            document.getElementById("d1").style.visibility = "hidden"
            document.getElementById("d").style.visibility = "visible";
        }
        //发布
        function issue() {
            document.getElementById("d").style.visibility = "hidden";
            document.getElementById("d1").style.visibility = "visible"

            let img = document.getElementById("d2").innerHTML;
            console.log(img)
            let input = document.getElementById("input").value;
                let option = document.getElementById("s1");
                var index = option.selectedIndex; // 选中索引
            var text = option.options[index].text; // 选中文本
            let textarea = document.getElementById("textarea").value;
            let date = new Date();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            let y = date.getFullYear();
            let M = date.getMonth() + 1;
            let d = date.getDate();
            let m1
            if (m < 10) {
                m1 = 0 + "" + m
            } else {
                m1 = m
            }
            let s1
            if (s < 10) {
                s1 = 0 + "" + s
            }else {
                s1 = s
            }
            let sj = y + "-" + M + "-" + d + "  " + h + ":" + m1 + ":" + s1;
             
            let li = document.createElement("li")
            let str = '<li class="li">'+
                            '<div id="d3">'+img+'</div>'+
                            '<div class="d3">'+
                                '<h3 style="margin-top: 0px;">'+input+'</h3>'+
                                '<p>'+textarea+'</p>'+
                                '<span>板块：'+text+'</span>'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                                ' <span>时间：'+sj+'</span>'+
                            '</div>'+
                    '</li>';
            li.innerHTML = str;
            document.getElementById("u1").appendChild(li)

        }
    </script>
</body>

</html>